<template>
	<jn-page>
		<!-- <u-navbar title="这里外卖省钱" :is-back="false" :background="background" :border-bottom="false" title-color="#ffffff"></u-navbar> -->
		<view class="hb">
			<view class="banner-bg"></view>
			<view class="banner"><u-swiper :list="list" img-mode="widthFix"></u-swiper></view>
		</view>
		
		<!-- 弹性盒 -->
		<view class="txh">
			<view class="txh-content" @tap="toCoupon(0)">
					<image src="../../static/images/01.png" mode=""></image>
					<view class="">
					    美团外卖
					</view>
			</view>
			<view class="txh-content" @tap="toCoupon(2)">
				<image src="../../static/images/02.png" mode=""></image>
				<view class="">
					饿了么
				</view>
			</view>
			<view class="txh-content" @tap="toShoplist">
				<image src="../../static/images/04.png" mode=""></image>
				<view class="">
					吃喝玩乐
				</view>
			</view>
			<view class="txh-content">
				<button type="default" open-type="share">
					<image src="../../static/images/05.png" mode=""></image>
					<view class="">
						分享赚
					</view>
				</button>
			</view>
			
		</view>
		
		<!-- 更改外卖 -->
		<view class="list">
			<view class="coupon" ref="coupon" >
						<image src="../../static/images/e.png" mode=""></image>
						<view class="right" @tap="toCoupon(2)">免费领取</view>
			</view>
			<view class="coupon" ref="coupon">
						<image src="../../static/images/mt.png" mode=""></image>
						<view class="right" @tap="toCoupon(0)">免费领取</view>
			</view>
			<view class="coupon" ref="coupon">
						<image src="../../static/images/sx.png" mode=""></image>
						<view class="right" @tap="toCoupon(1)">免费领取</view>
			</view>
		</view>
		
		
		<!-- <view class="list">
			<view class="coupon" ref="coupon">
				<view class="item" v-for="(v, i) in couponList" @click="toCoupon(i)" :key="i">
					<view class="top">
						<view class="left">
							<view class="content">
								<image :src="v.icon" class="icon" mode="widthFix" />
								<view class="name">{{ v.name }}</view>
							</view>
							<view class="text" v-if="v.type == 1">天天可领</view>
							<view class="text" v-else-if="v.type == 2">限时秒杀</view>
						</view>
						<view class="right">免费领取</view>
					</view>
					<view class="bottom"><image :src="v.bannerPic" mode="widthFix" /></view>
				</view>
			</view>
		</view> -->
		
		
		<!-- 果蔬，商超，酒店 -->
		<!-- <view class="cont">
			<uni-title title="" class="gstit">果蔬·商超·酒店</uni-title>
			<view class="box">
				<view class="gssc1">
					<image src="https://wmsq.oss-cn-hangzhou.aliyuncs.com/hd008.jpg" mode=""></image>
					<button class="mini-btn" type="default" size="mini">领取</button>
				</view>
				<view class="gssc1">
					<image src="https://wmsq.oss-cn-hangzhou.aliyuncs.com/hd007.jpg" mode=""></image>
					<button class="mini-btn" type="default" size="mini">领取</button>
				</view>
				<view class="gssc1">
					<image src="https://wmsq.oss-cn-hangzhou.aliyuncs.com/hd006.jpg" mode=""></image>
					<button class="mini-btn" type="default" size="mini">领取</button>
				</view>
			</view>
		</view> -->
		
		<view style="display: flex;align-items: center;justify-content: space-between;padding: 30rpx;">
			<uni-title title="" style="font-size: 32rpx;font-weight: 600;">吃喝玩乐</uni-title>
			<navigator url="../shoplist/shoplist"><text class="ckgd">查看更多</text></navigator>
		</view>
		<view class="chwl" @click="godetail(item)" v-for="(item,index) in shoplist" :key="index">
			<u-image border-radius="6" width="164rpx" height="137rpx" :src="item.logo"></u-image>
			<view class="chwl-right">
				<uni-title title="">{{item.title}}</uni-title>
				<view class="" style="color: #fd5049;margin: 13rpx 0;">{{item.qg_time}}</view>
				<view class="chwl-right1">
					<text style="margin-right: 30rpx;" v-if="item.distance">距离{{item.distance<1?(item.distance*1000).toFixed(0)+'m':(item.distance).toFixed(2)+'km'}}</text>
					<text>剩{{item.num}}名</text>
					<button class="mini-btn" type="default" size="mini" v-if="item.num>0 && item.is_shop==0" @tap.stop="snapUp(item)">抢购</button>
					<button class="mini-btn" style="width: 150rpx;color: rgba(0,0,0,.3);background-color: #f7f7f7;" type="default" size="mini" :disabled="true" v-else-if="item.is_shop==1">已领取</button>
					<button class="mini-btn" style="width: 150rpx;color: rgba(0,0,0,.3);background-color: #f7f7f7;" type="default" size="mini" :disabled="true" v-else>已结束</button>
				</view>
			</view>
		</view>
		
		<u-modal v-model="show" ref="uModal" :show-title="false" :show-confirm-button="false" :show-cancel-button="false" :async-close="true">
			<slot name="confirm-button">
				<view class="u-m-30">
					<view class="jn-modal-content">
						<view class="jn-avatar">
							<open-data type="userAvatarUrl"></open-data>
						</view>
						<view class="jn-nickname">
							<open-data type="userNickName"></open-data>
						</view>
					</view>
					<view class="jn-model-foot">
						<u-button class="jn-model-btn" type="error" shape="circle" @click="wxauth()">小程序登录</u-button>
						<view class="jn-model-can" @click="btncancel">暂不登录</view>
						<view class="text">
							<text>登录即同意我们的《用户协议》</text>
						</view>
					</view>
				</view>
			</slot>
		</u-modal>
	</jn-page>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			background: {
				backgroundColor: '#e54d42'
			},
			list: [],
			shoplist: [],
			current: 0,
			couponList: []
		};
	},

	onLoad(e) {
		if(e.fromid){
			this.$u.vuex('vuex_user.fromid', e.fromid);
		}else{
			this.$u.vuex('vuex_user.fromid', 0);
		}
		
		uni.login({
			provider: 'weixin',
			success: res => {
				this.$u.vuex('vuex_user.logincode', res.code);
			}
		})
	},
	onShow: function() {
		this.checklogin()
		this.getShopList()
	},
	onShareAppMessage: function(res) {
		if (res.from === 'button') {// 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: '美团，饿了么，单单帮你省',
			path: '/pages/index/index?fromid='+this.vuex_user.userId,
			imageUrl:'https://waimai.ximeng789.cn/sldier/slider2.png'
		}
    },
	methods: {
		getShopList(){
			const that = this
			this.$u
				.post('/wxapi/Api/goodsindex', {
					token: this.vuex_token.accessToken
				})
				.then(res => {
					if (res.code === 999) {
						this.show = true;
					}
					uni.getLocation({
						type: 'gcj02',
						altitude: true,
						success(lacation) {
							that.shoplist = []
							res.data.map((row,index)=>{
								if(index<10){
									if(row.latitude){
										row.distance = that.distance(lacation.latitude,lacation.longitude,row.latitude,row.longitude)
									}
									that.shoplist.push(row)
								}
							})
							var len = that.shoplist.length;
							for (var i = 0; i < len-1; i++) {
							    for (var j = 0; j < len - 1 - i; j++) {
							         // 相邻元素两两对比，元素交换，大的元素交换到后面
							        if (that.shoplist[j].distance > that.shoplist[j + 1].distance) {
							            var temp = that.shoplist[j];
							            that.shoplist[j] = that.shoplist[j+1];
							            that.shoplist[j+1] = temp;
							        }
							    }
							}
						}
					})
					
				});
		},
		//获取路径距离
		distance(lat1,lng1,lat2,lng2){
		    if(lat1 && lng1 && lat2 && lng2){
		      let radLat1 = this.rad(lat1);
		      let radLat2 = this.rad(lat2);
		      let a = radLat1 - radLat2;
		      let b = this.rad(lng1) - this.rad(lng2);
		      let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
		      s = s * 6378.137;
		      // EARTH_RADIUS;
		      s = Math.round(s * 10000) / 10000;
		      return s
		    }else{
		      return 0
		    }
		},
		rad(d){
		    return d*Math.PI/180.0
		},
		//抢购
		snapUp(row){
			this.$u
				.post('/wxapi/Api/shop', {
					token: this.vuex_token.accessToken,
					goods_id:row.id
				})
				.then(res => {
					if(res.code===200){
						row.num--
						row.is_shop=1
						uni.showToast({
							icon: 'none',
							title: '抢购成功'
						});
					}
				});
		},
		//跳转一分钱
		toOnePoint(){
			uni.navigateTo({
				url:'onePoint'
			})
		},
		toShoplist(){
			uni.navigateTo({
				url:'../shoplist/shoplist'
			})
		},
		// 跳转详情页
		godetail(row){
			uni.setStorageSync('detailInfo',row)
			uni.navigateTo({
				url:'../detail/detail'
			})
		},
		get_default() {
			this.$u
				.post('/wxapi/publics/config', {})
				.then(res => {
					console.log(res)
					this.couponList = res.data.cpslist;
					this.list = res.data.slider;
				});
		},
		get_cpsconfig() {
			this.$u
				.post('/wxapi/api/config', {
					token: this.vuex_token.accessToken
				})
				.then(res => {
					if (res.code == 999) {
						this.$u.toast(res.info);
						this.$u.vuex('vuex_user.hasLogin', false);
						this.show = true;
					}
					this.couponList = res.data.cpslist;
					this.list = res.data.slider;
				});
		},
		fqdysq(){
			uni.requestSubscribeMessage({
				tmplIds: ['CZPnukxtDZtmb6F-tj8SD8hInpP1v9PWNkGKzgneRsY'],
				success (res) { }
			})
		},
		checklogin() {
			if (!this.vuex_user.hasLogin) {
				//this.show = true;
				this.get_default();
			} else {
				this.get_cpsconfig();
			}
		},
		wxauth(){
			var _that = this;
			uni.login({
				provider: 'weixin',
				success: res => {
					_that.$u.vuex('vuex_user.logincode', res.code);
				},
				fail: err => {
					console.error('授权登录失败：' + JSON.stringify(err));
				}
			});
			uni.getUserProfile({
				desc: 'weixin',
				success: infoRes => {
					_that.$u.vuex('vuex_user.userinfo', infoRes.userInfo);
					uni.getSetting({
						success(res) {
							if (res.authSetting['scope.userInfo']) {
								_that.$u.post('/wxapi/wxlogin', {
										code: _that.vuex_user.logincode,
										userinfo: _that.vuex_user.userinfo,
										fromid:_that.vuex_user.fromid
									})
									.then(res => {
										console.log(res);
										_that.$u.toast(res.info);
										if (res.code == 200) {
											_that.$u.vuex('vuex_user.userId', res.data.id);
											_that.$u.vuex('vuex_user.hasLogin', true);
											_that.$u.vuex('vuex_token.accessToken', res.data.token);
											_that.$u.vuex('vuex_token.refreshToken', res.data.expire);
											_that.get_cpsconfig();
											_that.show = false;
										} else {
										}
										return false;
									});
							}
						}
					});
				},
				fail(res) {
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: '登陆失败'
					});
				}
			});
		},
		btncancel(){
			this.show = false;
		},
		toCoupon(i) {
			console.log(this.couponList[i]);
			//#ifdef H5
			window.location.href = this.couponList[i].url;
			//#endif

			//#ifdef MP-WEIXIN
			if (this.couponList[i].minapp) {
				wx.navigateToMiniProgram({
					appId: this.couponList[i].minapp.appid,
					path: this.couponList[i].minapp.path,
					success(res) {
						// 打开成功
					}
				});
			}
			//#endif
		}
	}
};
</script>

<style lang="scss">
	// 更改外卖
	// .list{
	// 	display: flex;
	// 	flex-direction: column;
	// }
	.coupon{
		position: relative;
		height: 218rpx;
	}
	.coupon image{
		width: 100%;
		height: 218rpx;
	}
	.coupon .right{
		position: absolute;
		right: 36rpx;
		top: 60rpx;
		background-color: #dd5b59;
		width: 160rpx;
		height: 60rpx;
		border-radius: 30rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 60rpx;
		text-align: center;
	}
	// 弹性盒子
	.txh{
		display: flex;
		width: 100%;
		height: 154rpx;
		background-color: #fff;
		justify-content: space-around;
		text-align: center;
		button{
			padding: 0;
			font-size: 28rpx;
			line-height: 1.4;
			background-color: #fff;
			&:after{
				border: 0;
			}
		}
	}
	.txh-content image{
		width: 65rpx;
		height: 65rpx;
	} 
	// 果蔬商超
	.cont{
		background-color: #fff;
		padding: 20rpx 0;
	}
	.gstit{
		font-size: 35rpx;
		font-weight: 900;
		margin-left: 30rpx;
	}
	
	.box{
		display: flex;
		padding: 10rpx 30rpx;
	}
	.gssc1 {
		flex: 1;
	}
	.gssc1 image{
		width: 215rpx;
		height: 277rpx;
		padding-bottom: 10rpx;
	}
	.gssc1 button{
		background-color: #dd5b59;
		color: #fff;
		border-radius: 30rpx;
	}
	.jn-btn {
		background-color: transparent;
		padding: 0;
		font-size: 24rpx;
		line-height: 1;
	}
	
	// 吃喝玩乐
	.ckgd{
		color: red;
	}
	.chwl{
		width: 714rpx;
		height: 198rpx;
		margin-left: 20rpx;
		box-sizing: border-box;
		padding: 24rpx 15rpx 38rpx 18rpx;
		display: flex;
		background-color: #fff;
		position: relative;
		margin-bottom: 30rpx;
	}
	.chwl-right{
		flex: 1;
		margin-left: 18rpx;
	}
	.chwl-right1{
		color:#c8c8c8 ;
	}
	.chwl-right1 button{
		width: 125rpx;
		height: 44rpx;
		background-color: #fb4d4e;
		position: absolute;
		right: 15rpx;
		color: #fff;
		line-height: 44rpx;
		border-radius: 20rpx;
	}
	
		
		
		
	button::after {
		border: none;
	}
	.jn-modal-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
		.jn-avatar {
			overflow:hidden;
			display: block;
			width: 130rpx;
			height: 130rpx;
			margin: 20rpx;
			margin-top: 50rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
			box-shadow: 6rpx 6rpx 20rpx rgba(0, 0, 0, 0.2);
		}
	}
	.jn-model-foot {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;
		width: 100%;
		.jn-model-btn {
			margin: 15rpx 0;
			width: 100%;
		}
		.jn-model-can {
			padding: 20rpx 0;
		}
		.text {
			font-size: 24rpx;
			color:#a8a8a8;
		}
	}
	
	.hb {
		position: relative;
		background-color: #ffffff;

		.banner-bg {
			background-image: url();
			background-size: contain;
			background-repeat: no-repeat;
			width: 100%;
			height: 290rpx;
			position: relative;
		}

		.banner {
			position: absolute;
			top: 0;
			width: 100%;
			padding: 20rpx 30rpx;
		}
	}

	.card-box {
		padding: 10rpx 0;
		background-color: #ffffff;
	}

	// .coupon {
	// 	padding-bottom: 10rpx;

	// 	.item {
	// 		background-color: #ffffff;
	// 		margin: 30rpx;
	// 		border-radius: 10rpx;
	// 		padding: 0 30rpx 30rpx 30rpx;

	// 		.top {
	// 			height: 116rpx;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: space-between;

	// 			.left {
	// 				height: 116rpx;
	// 				width: 400rpx;
	// 				display: flex;
	// 				align-items: center;
	// 				justify-content: space-between;

	// 				.content {
	// 					width: 100%;
	// 				}

	// 				.icon {
	// 					display: inline-block;
	// 					vertical-align: bottom;
	// 					width: 52rpx;
	// 					height: auto;
	// 				}

	// 				.name {
	// 					text-align: left;
	// 					display: inline-block;
	// 					vertical-align: bottom;
	// 					font-size: 34rpx;
	// 					color: #000;
	// 					line-height: 50rpx;
	// 					font-weight: bold;
	// 					margin-left: 15rpx;
	// 				}

	// 				.text {
	// 					width: 150rpx;
	// 					height: 38rpx;
	// 					line-height: 38rpx;
	// 					text-align: center;
	// 					font-size: 24rpx;
	// 					color: #61300e;
	// 					background: linear-gradient(90deg, #f9db8d, #f8d98a);
	// 					border-radius: 6rpx;
	// 				}
	// 			}

	// 			.right {
	// 				width: 170rpx;
	// 				height: 60rpx;
	// 				border-radius: 30rpx;
	// 				background: linear-gradient(90deg, #ec6f43, #ea4a36);
	// 				color: #fff;
	// 				font-size: 28rpx;
	// 				line-height: 60rpx;
	// 				text-align: center;
	// 			}
	// 		}

	// 		.bottom {
	// 			height: auto;
	// 			width: 100%;

	// 			image {
	// 				display: block;
	// 				width: 100%;
	// 				height: auto;
	// 			}
	// 		}
	// 	}
	// }
</style>